<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/main.css">
    <title>Клуб четырёх коней</title>
</head>
<body>
    <!-- Шапка -->
    <header>
        <div class="container">
            <div class="header__logo">
                <img src="img/logo.png" alt="logo">
            </div>
            <div class="header__content">
                <h1 class="header__content__h1">Превратите уездный город<br> <span>в столицу</span> <span>земного шара</span></h1>
                <p class="header__content__p">Оплатите взнос на телеграммы для организации<br>
                Международного васюкинского турнира по шахматам</p>
                <div class="header__content__flex">
                    <a href="#about"><button class="header__content__flex__button button-black">Поддержать шахматную мысль</button></a>
                    <a href="#team"><button class="header__content__flex__button button-transparent">Подробнее<br> о турнире</button></a>
                </div>
            </div>
        </div>
    </header>
    <!-- Бегущая строка -->
    <section class="marquee">
        <p class="marquee__p">Дело помощи утопающим — дело рук самих утопающих! · Шахматы двигают вперед не только культуру, но и экономику! · Лед тронулся, господа присяжные заседатели! · </p>
        <p class="marquee__p">Дело помощи утопающим — дело рук самих утопающих! · Шахматы двигают вперед не только культуру, но и экономику! · Лед тронулся, господа присяжные заседатели! · </p>
    </section>
    <!-- О нас -->
    <section id="about" class="about">
        <div class="container">
            <div class="about__content">
                <h1 class="about__content__h1">Чтобы поддержать<br> Международный васюкинский турнир <img class="about__content__h1__img" src="img/about-img1.png" alt="ai1"> посетите лекцию на тему: <span>«Плодотворная дебютная идея»</span></h1>
            </div>
            <div class="about__content2">
                <img class="about__content2__img" src="img/about-img2.jpg" alt="ai2">
                <div class="about__content2__wrap">
                    <h1 class="about__content__h1">и сеанс <span>одновременной игры в шахматы на 160 досках</span> гроссмейстера о. бендера</h1>
                    <div class="about__content2__table">
                <p class="about__content2_p">Место проведения:</p>
                <p class="about__content2_pb">Клуб «Картонажник»</p>
                <p class="about__content2_p">Дата и время мероприятия:</p>
                <p class="about__content2_pb">22 июня 1927 г. в 18:00</p>
                <p class="about__content2_p">Стоймость входных билетов:</p>
                <p class="about__content2_pb">20 коп.</p>   
                <p class="about__content2_p">Плата за игру:</p>
                <p class="about__content2_pb">50 коп.</p>  
                <p class="about__content2_p">Взнос на телеграммы:</p>
                <p class="about__content2_pb">100 руб.<span style="margin-left: 0.4rem;"> 21 руб. 16 коп.</span></p>   
                     </div> 
                     <p class="about__p">По всем вопросам обращаться в администрацию к К. Михельсону</p> 
                </div>
            </div>
        </div>
    </section>
    <!-- Этапы -->
    <section class="steps">
        <div class="container">
            <div class="steps__title">
                <h1 class="steps__title__h1">Этапы преображения васюков</h1>
                <p class="steps__title__p">Будущие источники обогащения васюкинцев</p>
            </div>
            <div class="steps__grid">
                <div class="steps__grid__item">
                    <span>1</span>
                    <p class="steps__grid__p">Строительство железнодорожной магистрали Москва-Васюки</p>
                </div>
                <div class="steps__grid__item grid-2">
                    <span>2</span>
                    <p class="steps__grid__p">Открытие фешенебельной гостиницы «Проходная пешка» и других небоскрёбов</p>
                </div>
                <div class="steps__grid__item grid-3">
                    <span>3</span>
                    <p class="steps__grid__p">Поднятие сельского хозяйства в радиусе на тысячу километров: производство овощей, фруктов, икры, шоколадных конфет</p>
                </div>
                <div class="steps__grid__item grid-4">
                    <span>4</span>
                    <p class="steps__grid__p">Строительство дворца для турнира</p>
                </div>
                <div class="steps__grid__item grid-5">
                    <span>5</span>
                    <p class="steps__grid__p">Размещение гаражей для гостевого<br> автотранспорта</p>
                </div>
                <div class="steps__grid__item grid-6">
                    <span>6</span>
                    <p class="steps__grid__p">Постройка сверхмощной радиостанции для передачи всему миру сенсационных результатов</p>
                </div>
                <div class="steps__grid__item grid-7">
                    <span>7</span>
                    <p class="steps__grid__p">Создание аэропорта «Большие Васюки» с регулярным отправлением почтовых самолётов и дирижаблей во все концы света, включая Лос-Анжелос и Мельбурн</p>
                </div>
                <img class="steps__grid__img" src="img/steps-air.png" alt="air">
                
            </div>
            <div class="steps__buttons">
                    <img id="prev2" class="team__title__button" src="img/team-buttonl.png" alt="tbl">
                    <div class="circle"></div>
                    <div class="circle"></div>
                    <div class="circle"></div>
                    <div class="circle"></div>
                    <div class="circle"></div>
                    <img id="next2" class="team__title__button" src="img/team-buttonr.png" alt="tbr">
            </div>
        </div>
    </section>
    <!-- Участник -->
    <section id="team" class="team">
        <div class="container">
           <div class="team__title">
            <h1 class="team__title__h1">Участники турнира</h1>
            <div class="team__title__item">
                <img id="prev" class="team__title__button" src="img/team-buttonl.png" alt="tbl">
                 <p class="team__title__p">3 / 6</p>
                <img id="next" class="team__title__button" src="img/team-buttonr.png" alt="tbr">
            </div>
           </div> 
           <div class="team__carousel">
                <div class="team__carousel__item">
                    <img class="team__carousel__item__img" src="img/team-img.png" alt="">
                    <h2 class="team__carousel__item__h2">Хозе-Рауль Капабланка</h2>
                    <p class="team__carousel__item__p">Чемпион мира по шахматам</p>
                    <button class="team__carousel__item__button">Подробнее</button>
                </div>
                <div class="team__carousel__item">
                    <img class="team__carousel__item__img" src="img/team-img.png" alt="">
                    <h2 class="team__carousel__item__h2">Эммануил Ласкер</h2>
                    <p class="team__carousel__item__p">Чемпион мира по шахматам</p>
                    <button class="team__carousel__item__button">Подробнее</button>
                </div>
                <div class="team__carousel__item">
                    <img class="team__carousel__item__img" src="img/team-img.png" alt="">
                    <h2 class="team__carousel__item__h2">Александр Алехин</h2>
                    <p class="team__carousel__item__p">Чемпион мира по шахматам</p>
                    <button class="team__carousel__item__button">Подробнее</button>
                </div>
                <div class="team__carousel__item">
                    <img class="team__carousel__item__img" src="img/team-img.png" alt="">
                    <h2 class="team__carousel__item__h2">Арон Нимцович</h2>
                    <p class="team__carousel__item__p">Чемпион мира по шахматам</p>
                    <button class="team__carousel__item__button">Подробнее</button>
                </div>
                <div class="team__carousel__item">
                    <img class="team__carousel__item__img" src="img/team-img.png" alt="">
                    <h2 class="team__carousel__item__h2">Рихард Рети</h2>
                    <p class="team__carousel__item__p">Чемпион мира по шахматам</p>
                    <button class="team__carousel__item__button">Подробнее</button>
                </div>
                <div class="team__carousel__item">
                    <img class="team__carousel__item__img" src="img/team-img.png" alt="">
                    <h2 class="team__carousel__item__h2">Остап Бендер</h2>
                    <p class="team__carousel__item__p">Гроссмейстер</p>
                    <button class="team__carousel__item__button">Подробнее</button>
                </div>
           </div>
        </div>
    </section>
    <!-- Бегущая строка -->
    <section class="marquee marqueebottom">
        <p class="marquee__p">Дело помощи утопающим — дело рук самих утопающих! · Шахматы двигают вперед не только культуру, но и экономику! · Лед тронулся, господа присяжные заседатели! · </p>
        <p class="marquee__p">Дело помощи утопающим — дело рук самих утопающих! · Шахматы двигают вперед не только культуру, но и экономику! · Лед тронулся, господа присяжные заседатели! · </p>
    </section>
    <!-- Подвал -->
    <footer>
        <div class="container">
            <p class="footer__p">Все персонажи, события и цитаты являются вымышленными и не принадлежат создателям сайта. С подробностями можно познакомиться в главе XXXIV романа Ильи Ильфа и Евгения Петрова «Двенадцать стульев».</p>
        </div>
    </footer>
    <!-- Скрипты -->
    <script src="js/main.js"></script>
</body>
</html>